<template>
  <div class="app-container">
    <div id="map">
      <Map
        :deviceCategoryList="deviceCategoryList"
        :lineData="
          tableLineData.filter((item) =>
            searchLayerValue.length > 0 && activeTab == 'first'
              ? item.inspLineName.indexOf(String(searchLayerValue)) > -1
              : true
          )
        "
        :dangerData="
          tableDangerData.filter((item) =>
            searchLayerValue.length > 0 && activeTab == 'second'
              ? item.dangerName.indexOf(String(searchLayerValue)) > -1
              : true
          )
        "
        :mapCenter="mapCenter"
        :inspUserPosition="
          currentInspUserPositionData.filter((item) =>
            searchLayerValue.length > 0 && activeTab == 'third'
              ? item.inspUserName.indexOf(String(searchLayerValue)) > -1
              : true
          )
        "
      />
      <Widgets :deviceCategoryList="deviceCategoryList" />
    </div>
    <!-- <tool :gmap="gmap" /> -->
    <el-row class="tool">
      <el-col :span="8" :offset="16" class="text-right">
        <div>
          <el-button @click="f_ShowLayer" type="primary" size="small">
            图 层
          </el-button>
          <el-button @click="f_ShowDangerList" type="warning">
            <p>隐 患</p>
            <p>列 表</p>
          </el-button>
          <span class="inline-block">
            <ClusterSwitch
              @toggle-show-layer-manager="toggleShowLayerManager"
            />
          </span>
        </div>
      </el-col>
    </el-row>
    <div v-if="showDangerList" class="content-danger-region">
      <div>
        <div class="title">隐患分布</div>
        <div class="search">
          <el-form
            ref="formRef"
            :inline="true"
            size="small"
            label-width="100"
            label-position="left"
          >
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item prop="polygonId">
                  <el-select
                    placeholder="请选择区域/线路"
                    v-model="searchLineValue"
                  >
                    <el-option
                      :label="item.inspLineName"
                      :value="item.inspLineId"
                      :key="item.inspLineId"
                      v-for="item in tableLineData"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="table">
          <el-table
            :data="
              tableData.filter((item) =>
                searchLineValue.length > 0
                  ? item.inspDestId == searchLineValue
                  : true
              )
            "
            border
            header-row-class-name="table-header"
            ref="tableRef"
            size="small"
            :height="tableHeight"
            highlight-current-row
          >
            <el-table-column
              type="index"
              label="序号"
              width="50"
              align="center"
            />
            <el-table-column
              label="区域/线路"
              prop="inspDestName"
              align="center"
            />
            <el-table-column label="隐患数" prop="dangerCount" align="center" />
            <el-table-column label="预警数" prop="warnCount" align="center" />
            <el-table-column
              label="历史累计隐患"
              prop="historyCount"
              align="center"
            />
            <el-table-column
              label="操作"
              prop="address"
              align="center"
              width="70px"
            >
              <template #default="scope">
                <el-button
                  @click="f_ShowDangerDetail(scope.row)"
                  type="primary"
                  size="small"
                  link
                  ><i-ep-view
                    class="mr-[2px] text-size-[11px] v-bottom"
                  />查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div v-if="showLayer" class="content-danger-region">
      <div>
        <div class="title">图层列表</div>
        <div class="search">
          <el-form
            ref="formRef"
            :inline="true"
            size="small"
            label-width="100"
            label-position="left"
          >
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item prop="polygonId">
                  <el-input
                    v-model="searchLayerValue"
                    :placeholder="
                      activeTab == 'first'
                        ? '请输入巡检线路名称搜索'
                        : activeTab == 'second'
                          ? '请输入隐患名称搜索'
                          : '请输入人员姓名搜索'
                    "
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="table">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="巡检线路" name="first">
              <el-table
                :data="
                  tableLineData.filter((item) =>
                    searchLayerValue.length > 0 && activeTab == 'first'
                      ? item.inspLineName.indexOf(String(searchLayerValue)) > -1
                      : true
                  )
                "
                border
                header-row-class-name="table-header"
                ref="tableLineRef"
                size="small"
                :height="tableHeightLayer"
                highlight-current-row
                @selection-change="f_HandleSelectionChange('line')"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="50"
                  align="center"
                />
                <el-table-column
                  label="线路名称"
                  prop="inspLineName"
                  align="center"
                />
                <el-table-column
                  label="是否显示"
                  prop="dangerName"
                  align="center"
                >
                  <template #header>
                    全选
                    <el-checkbox
                      class="align-bottom"
                      @change="f_ChangeDangerData('line')"
                      v-model="lineCheckedValue"
                    ></el-checkbox>
                  </template>
                  <template #default="scope">
                    <el-checkbox
                      v-model="scope.row.checked"
                      @change="f_ChangeDangerData"
                    ></el-checkbox>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="隐患名称" name="second">
              <el-table
                :data="
                  tableDangerData1.filter((item) =>
                    searchLayerValue.length > 0 && activeTab == 'second'
                      ? item.dangerName.indexOf(String(searchLayerValue)) > -1
                      : true
                  )
                "
                border
                header-row-class-name="table-header"
                ref="tableDangerRef1"
                size="small"
                highlight-current-row
                :height="tableHeightLayer / 2 - 10"
                @selection-change="f_HandleSelectionChange('danger')"
              >
                <!-- <el-table-column
                  type="index"
                  label="序号"
                  width="50"
                  align="center"
                /> -->
                <!-- <el-table-column type="selection" width="50" align="center" /> -->
                <el-table-column
                  label="隐患名称"
                  prop="dangerName"
                  align="center"
                />
                <el-table-column
                  label="是否显示"
                  prop="dangerName"
                  align="center"
                >
                  <template #header>
                    全选
                    <el-checkbox
                      class="align-bottom"
                      @change="f_ChangeDangerData('danger1')"
                      v-model="danger1CheckedValue"
                    ></el-checkbox>
                  </template>
                  <template #default="scope">
                    <el-checkbox
                      v-model="scope.row.checked"
                      @change="f_ChangeDangerData"
                    ></el-checkbox>
                  </template>
                </el-table-column>
              </el-table>
              <el-table
                class="mt-[15px]"
                :data="
                  tableDangerData2.filter((item) =>
                    searchLayerValue.length > 0 && activeTab == 'second'
                      ? item.dangerName.indexOf(String(searchLayerValue)) > -1
                      : true
                  )
                "
                border
                header-row-class-name="table-header"
                ref="tableDangerRef2"
                size="small"
                highlight-current-row
                :height="tableHeightLayer / 2 - 10"
                @selection-change="f_HandleSelectionChange('danger')"
              >
                <!-- <el-table-column
                  type="index"
                  label="序号"
                  width="50"
                  align="center"
                /> -->
                <!-- <el-table-column type="selection" width="50" align="center" /> -->
                <el-table-column
                  label="预警名称"
                  prop="dangerName"
                  align="center"
                />
                <el-table-column
                  label="是否显示"
                  prop="dangerName"
                  align="center"
                >
                  <template #header>
                    全选
                    <el-checkbox
                      class="align-bottom"
                      @change="f_ChangeDangerData('danger2')"
                      v-model="danger2CheckedValue"
                    ></el-checkbox>
                  </template>
                  <template #default="scope">
                    <el-checkbox
                      v-model="scope.row.checked"
                      size="large"
                      @change="f_ChangeDangerData"
                    />
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="人员轨迹" name="third">
              <el-table
                :data="
                  tablePersonData.filter((item) =>
                    searchLayerValue.length > 0 && activeTab == 'third'
                      ? item.inspUserName.indexOf(String(searchLayerValue)) > -1
                      : true
                  )
                "
                border
                header-row-class-name="table-header"
                ref="tablePersonRef"
                size="small"
                :height="tableHeightLayer"
                highlight-current-row
                @selection-change="f_HandleSelectionChange('person')"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="50"
                  align="center"
                />
                <el-table-column
                  label="在线人员姓名"
                  prop="inspUserName"
                  align="center"
                />
                <el-table-column
                  label="是否显示"
                  prop="dangerName"
                  align="center"
                >
                  <template #header>
                    全选
                    <el-checkbox
                      class="align-bottom"
                      @change="f_ChangeDangerData('person')"
                      v-model="personCheckedValue"
                    ></el-checkbox>
                  </template>
                  <template #default="scope">
                    <el-checkbox
                      v-model="scope.row.checked"
                      @change="f_ChangeDangerData"
                    ></el-checkbox>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <div
      v-if="showDangerDetail"
      class="content-danger-detail"
      :style="{ width: detaitWidth + 'px' }"
    >
      <div>
        <div class="title">
          隐患明细
          <span
            @click="f_ChangeType(1)"
            class="ml-[60px] text-[12px] pb-[4px] cursor-pointer"
            :class="{ active: activeTag == 1 }"
            >隐患数({{ tableDataDetail1.length }})</span
          >
          <span
            @click="f_ChangeType(2)"
            class="ml-[60px] text-[12px] pb-[4px] cursor-pointer"
            :class="{ active: activeTag == 2 }"
            >预警数({{ tableDataDetail2.length }})</span
          >
          <span
            @click="f_ChangeType(3)"
            class="ml-[60px] text-[12px] pb-[4px] cursor-pointer"
            :class="{ active: activeTag == 3 }"
            >历史累计({{ activeDanger.historyCount }})</span
          >
          <span class="float-right">
            <el-tag
              type="success"
              @click="onFullScreen"
              class="mr-[12px] cursor-pointer"
              >全屏</el-tag
            >
            <el-tag
              type="danger"
              class="mr-[15px] cursor-pointer"
              @click="f_CloseDangerDetail"
              >关闭</el-tag
            >
          </span>
        </div>
        <div class="table" v-if="showTable">
          <el-table
            :data="
              activeTag == 3
                ? tableDataDetail
                : activeTag == 1
                  ? tableDataDetail1
                  : tableDataDetail2
            "
            border
            header-row-class-name="table-header"
            ref="tableRef"
            size="small"
            :height="tableDetailHeight"
          >
            <el-table-column
              type="index"
              label="序号"
              width="50"
              align="center"
            />
            <el-table-column
              label="隐患名称"
              prop="dangerName"
              align="center"
              show-overflow-tooltip
            >
              <template #default="scope">
                <span @click="f_OpenDialog(scope.row)" style="color: #2196f3">
                  {{ scope.row.dangerName }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              label="隐患描述"
              prop="dangerContent"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              label="地址"
              prop="address"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              label="隐患等级"
              prop="level"
              align="center"
              width="80"
            >
              <template #default="scope">
                <el-tag v-if="scope.row.level == 3" type="success">低</el-tag>
                <el-tag v-if="scope.row.level == 2" type="warning">中</el-tag>
                <el-tag v-if="scope.row.level == 1" type="danger">高</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="隐患状态"
              prop="status"
              align="center"
              width="80"
            >
              <template #default="scope">
                <el-tag v-if="scope.row.status == 1" type="success"
                  >待处理</el-tag
                >
                <el-tag v-if="scope.row.status == 2" type="info">进行中</el-tag>
                <el-tag v-if="scope.row.status == 3" type="warning"
                  >已完成</el-tag
                >
                <el-tag v-if="scope.row.status == 0" type="danger"
                  >暂不处理</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              width="140"
              label="发现隐患时间"
              prop="reportTime"
              align="center"
            />
            <el-table-column
              width="140"
              label="处理隐患时间"
              prop="handleTime"
              align="center"
            />
          </el-table>
        </div>
      </div>
    </div>

    <!-- 弹窗 -->
    <el-drawer
      v-model="dialog.visible"
      title="隐患详情"
      size="1400"
      append-to-body
      @close="f_CloseDialog"
      class="bg-[#f5f5f5!important]"
      destroy-on-close
    >
      <edit_drawer :form="formData" @close="f_CloseDialog" />
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Inspection",
  inheritAttrs: false,
});
import ClusterSwitch from "./components/Widgets/ClusterSwitch/index.vue";
import Map from "./components/Map/index.vue";
import Widgets from "./components/Widgets/index.vue";

import { useDeviceCategory } from "@/views/pipe-network/hooks/useDeviceCategory";
import { find } from "lodash";
import tool from "./tool/index.vue";
import { Search } from "@element-plus/icons-vue";
import DangerAPI from "@/api/DangerAPI";
import moment from "moment";
import LineAPI from "@/api/LineAPI";
import GisPointInfoAPI from "@/api/GisPointInfoAPI";
import DeviceCategoryApi from "@/api/DeviceCategoryApi";

import { queryAreaInfoList } from "@/api/pipe";

import edit_drawer from "./../danger/detail.vue";

const deviceCategoryList = ref("");
const dialogVisible = ref(true);
const mapCenter = ref([]);

const dialog = reactive({
  visible: false,
});

let searchType = ref(1);
let searchValue = ref("");
let searchLayerValue = ref("");
let searchLineValue = ref("");

const toggleShowLayerManager = () => {
  isShowLayerManager.value = !isShowLayerManager.value;
};

// 弹框 隐患详情
function f_OpenDialog(data) {
  let dangerData = find(tableDangerData.value, { dangerId: data.dangerId });
  formData.value = dangerData;
  dialog.visible = true;
}

// 返回图片
function f_GetPath(data: any) {
  let index = 1;
  if (data.classId) {
    let typeData = find(tablePointTypeData.value, { classId: data.classId });
    if (typeData) {
      index = typeData.image;
    }
  }
  return Number(index);
}

let tableHeight = ref(0);
let tableHeightLayer = ref(0);
let activeTag = ref(1);
const tableData = ref([]);
const tableDataDetail = ref([]);
const tableDataDetail1 = ref([]);
const tableDataDetail2 = ref([]);

const tableLineData = ref([]);
const tablePointData = ref([]);
const tablePointTypeData = ref([]);
const tableDangerData = ref([]);
const tableDangerData1 = ref([]);
const tableDangerData2 = ref([]);
const tablePersonData = ref([]);

const tableLineRef = ref();
const tableDangerRef = ref();
const tableDangerRef1 = ref();
const tableDangerRef2 = ref();
const tablePersonRef = ref();

const checkedLineData = ref([]);
const checkedDangerData = ref([]);
const checkedPersonData = ref([]);

const currentInspUserPositionData = ref([]);

const showDangerList = ref(false);
const showDangerDetail = ref(false);
const showLayer = ref(false);
const dangerDetailData = ref([]);
const activeDanger = ref({});
const queryParams = reactive({
  pageIndex: 1,
  pageSize: 1000,
});
const selectData = ref([]);
const activeTab = ref("first");
const lineData = ref([]);
const areaPolygonList = ref([]);
const lineCheckedValue = ref(true);
const danger1CheckedValue = ref(true);
const danger2CheckedValue = ref(true);
const personCheckedValue = ref(true);
const showTable = ref(true);

const tableDetailHeight = ref(334);

const zoom = ref(12);
let gmap = null;

const formData = ref({});

function onMapReady(instance: any) {
  gmap = instance;
  console.log(instance);
}

function f_ChangeMap() {
  gmap.zoomIn();
}

window.addEventListener("keydown", function (e) {
  if (e.keyCode == 27) {
    e.preventDefault();
  }
});

const detaitWidth = ref(document.body.clientWidth - 880);
let isFullscreen = ref(false);
const onFullScreen = () => {
  // if (screenfull.isEnabled) {
  //   const el = document.querySelector(".content-danger-detail");
  //   el && screenfull.toggle(el);
  //   isFullscreen.value = !screenfull.isFullscreen;
  // }
  // showTable.value = !showTable.value;
  // setTimeout(() => {
  //   showTable.value = !showTable.value;
  //   console.log(isFullscreen.value);
  //   if (isFullscreen.value) {
  //     tableDetailHeight.value = window.innerHeight - 66;
  //   } else {
  //     tableDetailHeight.value = 334;
  //   }
  // }, 100);
  showTable.value = !showTable.value;
  setTimeout(() => {
    showTable.value = !showTable.value;
    if (tableDetailHeight.value > 400) {
      tableDetailHeight.value = 334;
      detaitWidth.value = document.body.clientWidth - 850;
    } else {
      tableDetailHeight.value = window.innerHeight - 194;
      detaitWidth.value = document.body.clientWidth - 280;
    }
  }, 100);
};

const getAllAreas = () =>
  queryAreaInfoList({
    pageSize: 100000,
    pageIndex: 1,
  }).then(({ data, succeeded }: any) => {
    if (succeeded && Array.isArray(data?.items)) {
      areaPolygonList.value = data.items
        .filter((item: any) => item.jsonGeom)
        .map((item: any) => {
          const { coordinates } = JSON.parse(item.jsonGeom);
          coordinates[0] = coordinates[0].map((item: any) => [
            item[1],
            item[0],
          ]);
          return {
            ...item,
            coordinates,
          };
        });
    }
  });

// change 隐患的勾选
function f_ChangeDangerData(flag) {
  if (flag == "line") {
    tableLineData.value.forEach((item, index) => {
      tableLineData.value[index].checked = lineCheckedValue.value;
    });
  }
  if (flag == "danger1") {
    tableDangerData1.value.forEach((item, index) => {
      tableDangerData1.value[index].checked = danger1CheckedValue.value;
    });
  }
  if (flag == "danger2") {
    tableDangerData2.value.forEach((item, index) => {
      tableDangerData2.value[index].checked = danger2CheckedValue.value;
    });
  }
  if (flag == "person") {
    tablePersonData.value.forEach((item, index) => {
      tablePersonData.value[index].checked = personCheckedValue.value;
    });
    currentInspUserPositionData.value.forEach((item, index) => {
      currentInspUserPositionData.value[index].checked =
        personCheckedValue.value;
    });
  }

  currentInspUserPositionData.value.forEach((item, index) => {
    let isChecked = find(tablePersonData.value, {
      inspUserId: item.inspUserId,
    }).checked;
    currentInspUserPositionData.value[index].checked = isChecked;
  });

  tableDangerData1.value = JSON.parse(JSON.stringify(tableDangerData1.value));
  tableDangerData2.value = JSON.parse(JSON.stringify(tableDangerData2.value));
  tableDangerData.value = tableDangerData1.value.concat(tableDangerData2.value);
  tablePersonData.value = JSON.parse(JSON.stringify(tablePersonData.value));
  currentInspUserPositionData.value = JSON.parse(
    JSON.stringify(currentInspUserPositionData.value)
  );

  // 判断是否全选
  danger1CheckedValue.value = find(tableDangerData1.value, { checked: false })
    ? false
    : true;
  danger2CheckedValue.value = find(tableDangerData2.value, { checked: false })
    ? false
    : true;
  personCheckedValue.value = find(tablePersonData.value, { checked: false })
    ? false
    : true;
  lineCheckedValue.value = find(tableLineData.value, { checked: false })
    ? false
    : true;
}

// 选中表格行
function f_CheckedTableRow(type: String) {
  // if (type == "line") {
  //   setTimeout(() => {
  //     tableLineRef.value.toggleAllSelection();
  //     tableDangerRef1.value.toggleAllSelection();
  //     tableDangerRef2.value.toggleAllSelection();
  //     tablePersonRef.value.toggleAllSelection();
  //   }, 200);
  // }
}

// 表格 选中 改变
function f_HandleSelectionChange(type) {
  if (type == "line") {
    let tempData = tableLineRef.value.getSelectionRows();
    checkedLineData.value = tempData;
  } else if (type == "danger") {
    // let tempData1 = tableDangerRef1.value.getSelectionRows();
    // let tempData2 = tableDangerRef2.value.getSelectionRows();
    // checkedDangerData.value = tempData1.concat(tempData1);
    // checkedDangerData.value.forEach(item => {
    //   tableDangerData
    // })
  } else {
    let tempData = tablePersonRef.value.getSelectionRows();
    checkedPersonData.value = tempData;
  }
}

// 查询
function f_HandelQuery() {
  DangerAPI.api_query_count(queryParams).then(({ data, succeeded }) => {
    if (succeeded) {
      tableData.value = data;
    }
  });
}

// 查询 今日巡检人员
function f_HandelQueryPosition() {
  let params = {
    StartTime: moment(new Date()).format("YYYY-MM-DD 00:00:00"),
    EndTime: moment(new Date()).format("YYYY-MM-DD 23:59:59"),
  };
  DangerAPI.api_insp_task_user(params).then(({ data, succeeded }) => {
    if (succeeded) {
      tablePersonData.value = data;
      tablePersonData.value.forEach((item, index) => {
        tablePersonData.value[index].checked = true;
      });
      checkedPersonData.value = data;
      f_HandelQueryUserPosition();
    }
  });
}

// 查询当前巡检人员的轨迹
function f_HandelQueryUserPosition() {
  let params = {
    StartTime: moment(new Date()).format("YYYY-MM-DD 00:00:00"),
    EndTime: moment(new Date()).format("YYYY-MM-DD 23:59:59"),
    // InspUserIds: inspUserId,
  };
  DangerAPI.api_insp_task_user_position(params).then(({ data, succeeded }) => {
    if (succeeded) {
      currentInspUserPositionData.value = data;
      currentInspUserPositionData.value.forEach((item, index) => {
        currentInspUserPositionData.value[index].checked = true;
      });
    }
  });
}

// 查询 管点
function f_HandleQueryPointLine() {
  let params = {
    pageSize: 100000,
    pageIndex: 1,
    isCoordinate: true,
  };
  GisPointInfoAPI.api_query(params).then(({ data, succeeded }) => {
    if (succeeded) {
      tablePointData.value = data.items
        .filter((item: any) => item.jsonGeom)
        .map((item: any) => {
          const [lng, lat] = JSON.parse(item.jsonGeom).coordinates;
          return {
            ...item,
            latlng: [lat, lng],
          };
        });
    }
  });
}

// 查询 管点
function f_HandleQueryPointLineType() {
  let params = {
    pageSize: 100000,
    pageIndex: 1,
  };
  DeviceCategoryApi.api_query(params).then(({ data, succeeded }) => {
    if (succeeded) {
      tablePointTypeData.value = data.items;
      f_HandleQueryPointLine();
    }
  });
}

// 查询 巡检线路
function f_HandelQueryLine() {
  let params = {
    pageSize: 100,
    pageIndex: 1,
  };
  LineAPI.api_query(params).then(({ data, succeeded }) => {
    if (succeeded) {
      tableLineData.value = data.items.map((item: any) => {
        let tempArr = [];
        if (item.jsonLine.length) {
          JSON.parse(item.jsonLine).coordinates.forEach((ele, eleIndex) => {
            tempArr.push([ele[1], ele[0]]);
          });
        }
        item.checked = true;
        return {
          ...item,
          latlngs: tempArr,
        };
      });
      checkedLineData.value = tableLineData.value;
    }
  });
}

// 查询 隐患名称
function f_HandelQueryDanger() {
  let params = {
    pageIndex: 1,
    pageSize: 10000,
  };
  tableDangerData1.value = [];
  tableDangerData2.value = [];
  DangerAPI.api_query(params).then(({ data, succeeded }) => {
    if (succeeded) {
      let checked = true;
      tableDangerData.value = data.items.map((item: any) => {
        const { coordinates } = JSON.parse(item.jsonPoint);
        item.checked = checked;
        // checked = !checked;
        return {
          ...item,
          latlng: [coordinates[1], coordinates[0]],
        };
      });
      checkedDangerData.value = tableDangerData.value;
      tableDangerData.value.forEach((item) => {
        if (item.status == 0) {
          tableDangerData2.value.push(item);
        } else {
          tableDangerData1.value.push(item);
        }
      });
    }
  });
}

// 查询 隐患 最近30天的
function f_HandelQueryDangerDay30(value) {
  tableDataDetail1.value = [];
  tableDataDetail2.value = [];

  let params = {
    InspDestId: value.inspDestId,
    PageIndex: 1,
    PageSize: 1000,
    StartTime: moment(new Date().getTime() - 1000 * 60 * 60 * 24 * 30).format(
      "YYYY-MM-DD 00:00:00"
    ),
    EndTime: moment(new Date()).format("YYYY-MM-DD 23:59:59"),
  };

  DangerAPI.api_query_count_detail(params).then(({ data, succeeded }) => {
    if (succeeded) {
      let positionData = [];
      if (data.items && data.items.length) {
        data.items.forEach((item, index) => {
          if (item.jsonPoint && index == 0) {
            let jsonPoint = JSON.parse(item.jsonPoint);
            if (jsonPoint.coordinates) {
              // positionData.push(jsonPoint.coordinates);
              mapCenter.value = [
                jsonPoint.coordinates[1] +
                  Math.floor(Math.random() * 10) * 0.00001,
                jsonPoint.coordinates[0] +
                  Math.floor(Math.random() * 10) * 0.00001,
              ];
            }
          }
          if (item.status == 0) {
            tableDataDetail2.value.push(item);
          } else {
            tableDataDetail1.value.push(item);
          }
        });
      }
    }
  });

  // let params = {
  //   pageIndex: 1,
  //   pageSize: 10000,
  //   InspDestId: value.inspDestId,
  //   ReportStartTime: moment(
  //     new Date().getTime() - 1000 * 60 * 60 * 24 * 30
  //   ).format("YYYY-MM-DD 00:00:00"),
  //   ReportEndTime: moment(new Date()).format("YYYY-MM-DD 00:00:00"),
  // };
  // DangerAPI.api_query(params).then(({ data, succeeded }) => {
  //   if (succeeded) {
  //     if (data.items && data.items.length) {
  //       data.items.forEach((item) => {
  //         if (item.status == 1) {
  //           tableDataDetail2.value.push(item);
  //         } else {
  //           tableDataDetail1.value.push(item);
  //         }
  //       });
  //     }
  //   }
  // });
}

// 隐患列表
function f_ShowDangerList() {
  showLayer.value = false;
  showDangerList.value = !showDangerList.value;
  if (showDangerList.value) {
    f_HandelQuery();
  }
}

// 图层
function f_ShowLayer() {
  showDangerList.value = false;
  showLayer.value = !showLayer.value;
  if (showLayer.value) {
    activeTab.value = "first";
    f_CheckedTableRow("line");
  }
}

// 隐患详情
function f_ShowDangerDetail(data) {
  activeDanger.value = data;
  tableDetailHeight.value = 334;
  detaitWidth.value = document.body.clientWidth - 850;
  f_HandelQueryDangerDay30(data);

  let params = {
    InspDestId: data.inspDestId,
    PageIndex: 1,
    PageSize: 1000,
  };

  DangerAPI.api_query_count_detail(params).then(({ data, succeeded }) => {
    if (succeeded) {
      tableDataDetail.value = data.items;
      showDangerDetail.value = true;
    }
  });
}

// 关闭隐患详情
function f_CloseDangerDetail() {
  showDangerDetail.value = false;
}

// 切换类型
function f_ChangeType(type) {
  activeTag.value = type;
}

window.onresize = () => {
  return (() => {
    tableHeight.value = window.innerHeight - 316;
  })();
};

onBeforeMount(async () => {
  deviceCategoryList.value = await useDeviceCategory();
  console.log(deviceCategoryList.value);
});

onMounted(() => {
  f_HandelQuery();
  f_HandleQueryPointLineType(); // 先查询管点的大类
  f_HandleQueryPointLine();
  f_HandelQueryLine();
  f_HandelQueryDanger();
  f_HandelQueryPosition();
  // getAllAreas();

  tableHeight.value = window.innerHeight - 316;
  tableHeightLayer.value = window.innerHeight - 370;
});
</script>
<style scoped lang="scss">
.app-container {
  position: relative;
  overflow: hidden;
}

#map {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
}

.tool {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  padding: 8px;
  padding-right: 10px;

  .el-col-8 {
    > div {
      display: inline-block;
      padding: 6px 20px;
      background: #fff;
      border-radius: 6px;

      > span {
        margin-left: 20px;
        color: #333;

        :deep .el-switch {
          margin-left: 12px;
        }
      }

      button {
        width: 50px;
        height: 50px;
        font-size: 10px;
        border-radius: 50%;

        :deep span {
          display: inline-block;
        }

        p {
          display: block;
          width: 100%;
          margin: 3px 0;
          font-size: 10px;
        }
      }
    }
  }
}

.content-danger-region {
  position: absolute;
  top: 80px;
  right: 0;
  z-index: 100;
  width: 560px;
  height: calc(100% - 80px);
  background: #ffffffa1;

  > div {
    width: 100%;
  }

  .title {
    height: 40px;
    line-height: 40px;
    color: #fff;
    text-align: center;
    background: linear-gradient(90deg, #299dda, #299dda);
  }

  .search {
    padding: 12px 12px 0;
  }

  .table {
    width: 100%;
    padding: 0 12px 12px;
  }

  :deep .el-form--inline .el-form-item {
    width: 100%;
  }

  :deep .el-tabs {
    padding: 0 10px;
    background: #fff;
  }
}

.content-danger-detail {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: calc(100% - 580px);
  background: #ffffffa1;

  > div {
    width: 100%;
  }

  .title {
    height: 40px;
    padding-left: 20px;
    line-height: 40px;
    color: #fff;
    text-align: left;
    background: linear-gradient(90deg, #299dda, #299dda);
  }

  .search {
    padding: 12px 12px 0;
  }

  .table {
    width: 100%;
    padding: 12px;
  }

  :deep .el-form--inline .el-form-item {
    width: 100%;
  }

  .active {
    border-bottom: 1px solid red;
  }
}
</style>
